<template>
  <div>
    <br>
    <div style="text-align: center">
      <van-image
              round
              width="10rem"
              height="10rem"
              :src="avatar"
      />
    </div>
    <br>
    <van-row class="user-links">
      <van-col span="6">
        <van-icon name="medal-o" />
        客户数量
      </van-col>
      <van-col span="6">
        <van-icon name="gift-card-o" />
        保单数量
      </van-col>
      <van-col span="6">
        <van-icon name="records" />
        理赔
      </van-col>
      <van-col span="6">
        <van-icon name="balance-o" />
        客户保障
      </van-col>
    </van-row>
    <van-row class="user-links">
      <van-col span="6">
        {{customer_num}}
      </van-col>
      <van-col span="6">
        {{insurance_num}}
      </van-col>
      <van-col span="6">
        {{customer_payment}}
      </van-col>
      <van-col span="6">
        {{sum_money}}
      </van-col>
    </van-row>
    <!--<van-divider>基本信息</van-divider>-->
    <van-cell-group class="user-group">
      <van-cell icon="manager-o" title="姓名" :value="name" size="large"/>
      <van-cell icon="desktop-o" title="任职公司" :value="company" size="large"/>
      <van-cell icon="clock-o" title="从业年限" :value="year" size="large"/>
      <van-cell icon="records" title="工号" :value="work_id" size="large"/>
      <van-cell icon="phone-circle-o" title="电话" :value="phone" size="large"/>
      <van-cell icon="free-postage" title="邮箱" :value="email" size="large"/>
    </van-cell-group>
    <van-collapse v-model="activeName" accordion>
      <van-collapse-item icon="like-o" title="服务介绍" name="1" size="large">{{service_range}}</van-collapse-item>
      <van-collapse-item icon="diamond-o" title="特权服务" name="2" size="large">{{privilege_service}}</van-collapse-item>
    </van-collapse>
    <van-collapse v-model="showP" accordion>
      <van-collapse-item icon="newspaper-o" title="风采展示" name="1" size="large">
        <van-image v-for="(show,i) in showList" :key="i"
                   fit="contain"
                   width="5rem"
                   height="5rem"
                   :src="show"
                   @click="clickPic()"
        />
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
    import Vue from 'vue';
    import { Collapse, CollapseItem,Row, Col, Icon, Cell, CellGroup, Image as VanImage,Divider,ImagePreview  } from 'vant';
    Vue.use(VanImage);
    Vue.use(Divider);
    Vue.use(Collapse);
    Vue.use(CollapseItem);
    export default {
        data() {
            return {
                activeName: '0',
                showP: '0',
                avatar: '',
                showList: [],
                name:'',
                motto:'',
                company:'',
                work_id:'',
                phone:'',
                email:'',
                customer_num:'',
                customer_payment:'',
                insurance_num:'',
                sum_money:'',
                privilege_service:'',
                service_range:'',
                year:'',
            };
        },
        methods: {
            clickPic(){
                // window.console.log("event:",event);
                ImagePreview(this.showList);
            }
        },
        created() {
            this.avatar = this.$route.params.salesman.avatar,
                this.showList = (this.$route.params.salesman.show || '').split(","),
                this.name = this.$route.params.salesman.name,
                this.motto = this.$route.params.salesman.motto,
                this.company = this.$route.params.salesman.company,
                this.work_id = this.$route.params.salesman.work_id,
                this.phone = this.$route.params.salesman.phone,
                this.email = this.$route.params.salesman.email,
                this.customer_num = this.$route.params.salesman.customer_num ,
                this.customer_payment = this.$route.params.salesman.customer_payment + '（万元）',
                this.insurance_num = this.$route.params.salesman.insurance_num,
                this.sum_money = this.$route.params.salesman.sum_money + '（万元）',
                this.privilege_service = this.$route.params.salesman.privilege_service,
                this.service_range = this.$route.params.salesman.service_range,
                this.year = this.$route.params.salesman.year + "年"
        },
        components: {
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup
        }
    };
</script>

<style lang="less">
  .user {
    &-poster {
      width: 100%;
      height: 53vw;
      display: block;
    }

    &-group {
      margin-bottom: 15px;
    }

    &-links {
      padding: 5px 0;
      font-size: 12px;
      text-align: center;
      background-color: #fff;

      .van-icon {
        display: block;
        font-size: 24px;
      }
    }
  }
</style>
